<template>
  <div v-if="isVisible" class="planet-info-overlay" @click="handleOverlayClick">
    <div class="planet-info-modal" @click.stop>
      <div class="modal-header">
        <h2>{{ planetData.nameCn }} ({{ planetData.name }})</h2>
        <button @click="$emit('close')" class="close-btn">✕</button>
      </div>
      
      <div class="modal-content">
        <div class="planet-preview">
          <div 
            class="planet-circle"
            :style="{ 
              backgroundColor: planetData.color,
              width: previewSize + 'px',
              height: previewSize + 'px'
            }"
          ></div>
        </div>
        
        <div class="planet-details">
          <h3>基本信息</h3>
          <div class="detail-grid">
            <div class="detail-item">
              <span class="detail-label">直径:</span>
              <span class="detail-value">{{ planetData.realData.diameter }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">距太阳距离:</span>
              <span class="detail-value">{{ planetData.realData.distanceFromSun }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">公转周期:</span>
              <span class="detail-value">{{ planetData.realData.orbitalPeriod }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">自转周期:</span>
              <span class="detail-value">{{ planetData.realData.rotationPeriod }}</span>
            </div>
          </div>
          
          <h3>轨道特征</h3>
          <div class="detail-grid">
            <div class="detail-item">
              <span class="detail-label">轨道半径 (相对):</span>
              <span class="detail-value">{{ planetData.orbitRadius }}px</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">模拟周期:</span>
              <span class="detail-value">{{ planetData.orbitPeriod }} 天</span>
            </div>
          </div>
          
          <div class="planet-description">
            <h3>简介</h3>
            <p>{{ getPlanetDescription(planetData.name) }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { PlanetData } from '../types';

// Props
interface Props {
  isVisible: boolean;
  planetData: PlanetData | null;
}

const props = defineProps<Props>();



// 计算预览大小
const previewSize = computed(() => {
  if (!props.planetData) return 50;
  return Math.max(50, Math.min(100, props.planetData.radius * 3));
});

// 处理遮罩点击
const handleOverlayClick = () => {
  emit('close');
};

const emit = defineEmits<{
  close: [];
}>();

// 获取行星描述
const getPlanetDescription = (planetName: string): string => {
  const descriptions: Record<string, string> = {
    'Mercury': '水星是太阳系中最小的行星，也是离太阳最近的行星。由于距离太阳很近，水星表面温度极高，昼夜温差巨大。',
    'Venus': '金星是太阳系中最热的行星，表面温度高达462°C。金星被厚厚的大气层包围，主要由二氧化碳组成，产生强烈的温室效应。',
    'Earth': '地球是太阳系中唯一已知存在生命的行星。拥有液态水、适宜的大气层和磁场，为生命的存在提供了完美的条件。',
    'Mars': '火星被称为"红色星球"，因为其表面富含氧化铁。火星有稀薄的大气层，表面有巨大的峡谷和可能曾经存在水的痕迹。',
    'Jupiter': '木星是太阳系中最大的行星，是一个气态巨行星。木星有超过80颗卫星，包括四颗大型的伽利略卫星。',
    'Saturn': '土星以其美丽的光环系统而闻名。土星是一个气态巨行星，密度很低，如果有足够大的海洋，土星甚至能漂浮在水面上。',
    'Uranus': '天王星是一个冰巨星，其自转轴几乎横躺着，导致极地地区有长达42年的极昼和极夜。天王星也有光环系统。',
    'Neptune': '海王星是太阳系中最远的行星，也是风速最快的行星，风速可达每小时2100公里。海王星呈现美丽的蓝色。'
  };
  
  return descriptions[planetName] || '这是一颗神秘的行星。';
};
</script>

<style scoped>
.planet-info-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  animation: fadeIn 0.3s ease;
}

.planet-info-modal {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  max-width: 600px;
  max-height: 80vh;
  width: 90%;
  overflow-y: auto;
  animation: slideIn 0.3s ease;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h2 {
  margin: 0;
  color: var(--star-gold);
  font-size: 24px;
}

.close-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.close-btn:hover {
  color: white;
  background: rgba(255, 255, 255, 0.1);
}

.modal-content {
  padding: 24px;
}

.planet-preview {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.planet-circle {
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  animation: rotate 10s linear infinite;
}

.planet-details h3 {
  color: var(--star-yellow);
  margin: 20px 0 12px 0;
  font-size: 18px;
}

.planet-details h3:first-child {
  margin-top: 0;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  border-left: 3px solid var(--star-gold);
}

.detail-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.detail-value {
  color: white;
  font-weight: bold;
  font-size: 14px;
}

.planet-description {
  margin-top: 20px;
}

.planet-description p {
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  font-size: 14px;
}

/* 滚动条样式 */
.planet-info-modal::-webkit-scrollbar {
  width: 6px;
}

.planet-info-modal::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

.planet-info-modal::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.3);
  border-radius: 3px;
}

/* 动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .planet-info-modal {
    width: 95%;
    max-height: 90vh;
  }
  
  .modal-header {
    padding: 16px 20px;
  }
  
  .modal-header h2 {
    font-size: 20px;
  }
  
  .modal-content {
    padding: 20px;
  }
  
  .detail-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
</style>